/*
 * @Description: 右侧 - 广告/活动
 * @Date: 2021-03-10 18:21:28
 * @Author: 黄治恩
 */

import React, { Component } from 'react';
import { Image, Button  } from 'antd'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'

import Advertisement from '@/components/Advertisement'

import './style.scss'

interface Activity_type {
  id:string,
  title:string,
  img?:string
}

interface Ad_type {
  id:string,
  img:string,
  href?:string
}

interface Props_type {
  showFixed:boolean
}

class IndexAsinde extends Component<Props_type> {

  state = {
    list:[
      {
        id:nanoid(),
        title:'阿里巴巴平头解决方案研讨会·深圳',
        img:'https://img.unitimes.pro/img/45988516970198258.png'
      },
      {
        id:nanoid(),
        title:'阿里巴巴平头哥｜AIOT解决方案研讨会·深圳AIOT解决方案研讨会·深圳AIOT解决方案研讨会·深圳',
        img:'https://img.unitimes.pro/img/45988516970198258.png'
      }
    ],
    adList:[
      {
        id:nanoid(),
        img:'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53ac340e217a48fb80153c2149ea9c6c~tplv-k3u1fbpfcp-watermark.image'
      },
      {
        id:nanoid(),
        img:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a96a3116752946db9b409de22c7a7ac0~tplv-k3u1fbpfcp-watermark.image'
      }
    ],
  }

  render() {
    const { list, adList } = this.state
    const { showFixed } = this.props
    return (
      <aside className="index-aside">
        <div className={showFixed ? 'fixed-box' : ''}>
          {
            adList.map( (ad:Ad_type) => (
              <Advertisement key={ad.id} src={ad.img} className="sidebar-block" />
            ))
          }
          
          <div className="app-download-sidebar-block sidebar-block">
            <Image width={50} height={50} className="qr-img" src="https://www.unitimes.pro/_nuxt/img/c0f5be6.png" preview={false} />
            <div className="content-box">
              <h4 className="title">下载Unitimes App</h4>
              <p className="desc">与独角兽共赢时代</p>
            </div>
          </div>
        </div>
        <div className="activity-box sidebar-block">
          <div className="title-box">
            <h2 className="title">活动</h2>
            <Button className="more-btn" type="text">更多</Button>
          </div>
          <ul className="activity-list">
            {
              list.map( (activiet:Activity_type) => (
                <li key={activiet.id} className="activity-item">
                  <Image className="item-img" width={220} src={activiet.img} preview={false} />
                  <h2 className="item-title">{activiet.title}</h2>
                </li>
              ))
            }
          </ul>
        </div>
      </aside>
    );
  }
}

export default connect(
  (state:{showFixed:boolean}) => ({
    showFixed:state.showFixed
  }),
  {}
)(IndexAsinde);